<script setup lang="ts">
import { ref } from 'vue'
import home from './home.vue'
import member from './member.vue'
import order from './order.vue'
import zitiorder from './zitiorder.vue'
import tongji from './tongji.vue'
import other from './other.vue'
import msgModal from '../components/msgModal.vue'
import distribution from '../components/distribution.vue'
// 引入CustomConfirm组件
import CustomConfirm from './CustomConfirm.vue'

const msgModalRef = ref(msgModal);
const showModal = (title,times=1000) => {
	if(msgModalRef.value){
		msgModalRef.value.openMsg(title,times);
	}
}
const homeRef = ref(home);
let homerouter = ref(1),title = ref(''),logoutTitle = ref('确定退出吗？');
// 使用confirmVisible替代logoutShow
let confirmVisible = ref(false);

const jump = (index:number)=>{
	homerouter.value = index;
}
let shoptitle:string | null = localStorage.getItem('title');

if (shoptitle !== null) {
	title.value = shoptitle;
}
const logout = ()=>{
	window.electron.ipcRenderer.send('logout');
}
const logouttip = () => {
    confirmVisible.value = true;
    let outListNum = localStorage.getItem('outListNum');
    if (outListNum !== null && parseInt(outListNum, 10) > 0) {
        logoutTitle.value = '还有挂单未处理，确定退出吗？';
    } else {
        logoutTitle.value = '确定退出吗？';
    }
}
const updateData = () =>{
	if(homeRef.value){
		homeRef.value.getShopCate();
		showModal('更新成功',1000);
	}
}

// 添加确认和取消退出的方法
const confirmLogout = () => {
    logout();
}

const cancelLogout = () => {
    confirmVisible.value = false;
}
</script> 
<template>
	<main class="homepagemain">
		<msgModal ref="msgModalRef"/>
		
		<!-- 使用CustomConfirm组件替换原来的退出确认弹框 -->
		<CustomConfirm 
			:visible="confirmVisible"
			title="退出确认"
			:message="logoutTitle"
			confirm-text="确定"
			cancel-text="取消"
			@confirm="confirmLogout"
			@cancel="cancelLogout"
		/>
		
		<div class="homeleft">
			<div class="shop-info">
				<img src="../assets/logo.jpg" alt="" class="img">
				<div class="title">{{ title }}</div>
			</div>
			<div class="nav-menu">
				<div class="nav-item" v-bind:class="{ 'active': homerouter == 1 }" @click="jump(1)">
					<img src="../assets/icon1.png" class="nav-icon" alt="">
					<span class="nav-text">结算</span>
				</div>
				<div class="nav-item" v-bind:class="{ 'active': homerouter == 2 }" @click="jump(2)">
					<img src="../assets/icon2.png" class="nav-icon" alt="">
					<span class="nav-text">会员</span>
				</div>
				<div class="nav-item" v-bind:class="{ 'active': homerouter == 3 }" @click="jump(3)">
					<img src="../assets/icon3.png" class="nav-icon" alt="">
					<span class="nav-text">查单</span>
				</div>
				<div class="nav-item" v-bind:class="{ 'active': homerouter == 4 }" @click="jump(4)">
					<img src="../assets/icon5.png" class="nav-icon" alt="">
					<span class="nav-text">自提</span>
				</div>
				<div class="nav-item" v-bind:class="{ 'active': homerouter == 7 }" @click="jump(7)">
					<img src="../assets/icon10.png" class="nav-icon" alt="">
					<span class="nav-text">配送</span>
				</div>
				<div class="nav-item" v-bind:class="{ 'active': homerouter == 5 }" @click="jump(5)">
					<img src="../assets/icon7.png" class="nav-icon" alt="">
					<span class="nav-text">统计</span>
				</div>
				<div class="nav-item" @click="updateData">
					<img src="../assets/icon8.png" class="nav-icon" alt="">
					<span class="nav-text">同步</span>
				</div>
				<div class="nav-item" v-bind:class="{ 'active': homerouter == 6 }" @click="jump(6)">
					<img src="../assets/icon9.png" class="nav-icon" alt="">
					<span class="nav-text">设置</span>
				</div>
				<div class="nav-item logout" @click="logouttip()">
					<img src="../assets/icon6.png" class="nav-icon" alt="">
					<span class="nav-text">退出</span>
				</div>
			</div>
		</div>
		<div class="right">
			<home v-show="homerouter == 1" ref="homeRef"/>
			<member v-if="homerouter == 2" />
			<order v-if="homerouter == 3" />
			<zitiorder v-if="homerouter == 4" />
			<tongji v-if="homerouter == 5" />
			<other v-if="homerouter == 6" />
			<distribution v-if="homerouter == 7" />
		</div>
    </main>
</template>
<style lang="scss">
#app{
	margin:0;
	padding:0;
	width: 100%;
	height: 100%;
	display: block;
}
html{
	width: 100%;
	height:100%;
}
body{
	width:100%;
	height:100%;
	padding: 0;
    margin: 0;
	display: block;
}
.msgTitlefade-enter-active, .msgTitlefade-leave-active {
	transition: opacity 0.3s;
}
.msgTitlefade-enter-from, .msgTitlefade-leave-to {
	opacity: 0;
}
.homepagemain{
	width:100%;
    height: 100%;
    background-color: #eaeef7;
	overflow: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	color:black;
	
	.homeleft{
		color:#a8a8a8;
		width: 10%;
		height: 100%;
		background-color: #2c3e50; /* 修改为更柔和的蓝灰色调 */
		background-image: linear-gradient(to bottom, #2c3e50, #34495e); /* 添加渐变效果 */
		display: flex;
		flex-direction: column;
		box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
		
		.shop-info {
			padding: 20px 0;
			text-align: center;
			border-bottom: 1px solid rgba(255, 255, 255, 0.1);
			
			.img {
				width: 70px;
				height: 70px;
				border-radius: 50%;
				border: 3px solid rgba(255, 255, 255, 0.2);
				transition: all 0.3s ease;
				
				&:hover {
					transform: scale(1.05);
					border-color: #1976D2;
				}
			}
			
			.title {
				margin-top: 15px;
				color: #fff;
				font-size: 16px;
				font-weight: 500;
				padding: 0 10px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		
		.nav-menu {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding: 15px 0;
			overflow-y: auto;
			
			.nav-item {
				display: flex;
				align-items: center;
				padding: 12px 20px;
				margin: 4px 8px;
				border-radius: 6px;
				cursor: pointer;
				transition: all 0.2s ease;
				
				.nav-icon {
					width: 22px;
					height: 22px;
					margin-right: 12px;
					opacity: 0.8;
					transition: all 0.2s ease;
				}
				
				.nav-text {
					font-size: 14px;
					transition: all 0.2s ease;
				}
				
				&:hover {
					background-color: rgba(255, 255, 255, 0.15); /* 稍微提高悬停透明度 */
					
					.nav-icon {
						opacity: 1;
					}
					
					.nav-text {
						color: #fff;
					}
				}
				
				&.active {
					background-color: #409EFF; /* 修改为与系统主色调一致的蓝色 */
					color: white;
					
					.nav-icon {
						opacity: 1;
					}
					
					.nav-text {
						color: white;
						font-weight: 500;
					}
				}
				
				&.logout {
					margin-top: auto;
					border-top: 1px solid rgba(255, 255, 255, 0.1);
					margin: 10px 8px 4px;
					padding-top: 15px;
					
					&:hover {
						background-color: rgba(244, 67, 54, 0.1);
						color: #f44336;
						
						.nav-icon {
							filter: invert(40%) sepia(90%) saturate(2000%) hue-rotate(340deg) brightness(100%) contrast(100%);
						}
					}
				}
			}
		}
	}
	
	.right{
		height: 100%;
		width: 90%;
	}
	.msgTitleShowModel{
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index:11;
        .modelInfo{
            position: absolute;
            width:40%;
            height:19%;
            background: #fff;
            border-radius: 10px;
            border:2px solid #9b9ea32e;
            .info{
                width: 100%;
                height: 40%;
                background: #ffffff;
                border-radius: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                color: #2a2b2d;
                font-size: 20px;
                font-weight: 600;
            }
            .footer{
                display: flex;
                width: 100%;
                height: 60%;
                align-items: end;
                padding: 10px;
                font-size: 30px;
                .cancel{
                    height:100%;
                    width:50%;
                    background-color: #5a5f73;
                    border:1px solid #2a2b2d;
                    color:#fff;
                    display: grid;
                    font-size: 20px;
                }
                .deleteGood{
                    height:100%;
                    width:50%;
                    background-color: #5a5f73;
                    border:1px solid #2a2b2d;
                    color:#fff;
                    display: grid;
                    font-size: 20px;
                }
            }
        }
        
    }
}

</style>